import Taro, { Component } from '@tarojs/taro'
import { View, Swiper, SwiperItem, Image, Button } from '@tarojs/components'
import './index.scss'
import http from '../../http/http.js'

// 引入数据
import data from '../../http/mock'

// 子组件
import TopBar from '../../component/index/topBar/index'
import FoodItem from '../../component/foodItem/foodItem'

export default class Index extends Component {

  config = {
    navigationBarTitleText: 'Taro'
  }
  constructor (props) {
    super(props)
    this.state = {
      bannerList: [],
      typeList: []
    }
  }
  componentWillMount () { }

  componentDidMount () {
    http({url: 'homeBanner'}).then(res => {
      console.log(res)
      let {data: {data}} = res
      this.setState({
        bannerList : data
      })
    })
    this.setState({
      typeList: data.home.list
    })
  }
  componentWillUnmount () { }

  componentDidShow () { }

  componentDidHide () { }

  cb = (test) => {
    console.log(test)
  }



  render () {
    const showTopBar = process.env.TARO_ENV === 'h5'
    return (
      <View className='index'>
        {showTopBar ? <TopBar text='Taro' />: null}
        <Swiper
          className='home-swiper'
          indicatorColor='#999'
          indicatorActiveColor='#d40073'
          vertical={false}
          circular
          indicatorDots
          autoplay>
          {
            this.state.bannerList.map((item) =>
              <SwiperItem key={item.id}  className='home-swiper'>
                <Image className='taro-img' mode='scaleToFill' src={item.picUrl}  />
              </SwiperItem>
            )
          }
        </Swiper>

        <View>
          {
            this.state.typeList.map((item,index) => {
              const titleText = ['人气套餐', '热卖推荐', '金牌产品', '秘制锅底']
              const title = titleText[index]
              return (
                <View key={index} className='type_list'>
                  <View className='type-title'>{title}</View>
                  <View className='type_img'>
                    <Image className='taro-img' mode='scaleToFill' src={item.typeIcon}  />
                  </View>
                  {
                    item.typeFoodList.map((subItem, subIndex) => {
                      return (
                       <FoodItem onCw={this.cb} key={subIndex} food={subItem} />
                      )
                    })
                  }
                </View>
              )
            })
          }
        </View>
        {/*<button wx:if="{{canIUse}}" open-type="getUserInfo" bindgetuserinfo="bindGetUserInfo">授权登录</button>*/}
      </View>
    )
  }
}

